import React from 'react';
import {Card, message, Icon} from 'antd';
import './ui.less';
import Tabs from "antd/lib/tabs";

const {TabPane} = Tabs;


//简小精悍，简单的信息提示
export default class ITabs extends React.Component {
    newTabIndex = 0;
    handleChange = (key) => {
        message.info("您选择的页签是：" + key);
    };
    state = {
        panes: []
    };

    componentDidMount() {
        const panes = [
            {
                title: 'tab 1',
                content: 'tab 1',
                key: '1'
            },
            {
                title: 'tab 2',
                content: 'tab 2',
                key: '2'
            },
            {
                title: 'tab 3',
                content: 'tab 3',
                key: '3'
            }


        ];
        this.setState({
            activeKey: panes[0].key,
            panes: panes
        })
    }

    onChange = (activeKey) => {
        this.setState({
            activeKey
        })

    };
    onEdit = (targetKey, action) => {
        this[action](targetKey)
    };
    add = () => {
        const panes = this.state.panes;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes.push({title: activeKey, content: 'new tab pane', key: activeKey})
        this.setState({
            panes,
            activeKey
        })
    };


    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            //删除当前页签
            if (pane.key === targetKey) {
                //当前页签key换成他前面的一个
                lastIndex = i - 1;
            }
        });
        //把当前页签key和目标删除页签key不同的全部拿出来，这些是剩存留的
        const panes = this.state.panes.filter(pane => pane.key !== targetKey)


        //如果关掉的和当前的key一样，那么activeKey就往前移动一个，来替代关掉的key，
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key
        }
        this.setState({panes, activeKey})

    }


    render() {
        return (
            <div>
                <Card title="tab页签" className="card-wrap">
                    <Tabs defaultActiveKey='3' onChange={this.handleChange}>
                        <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
                        <TabPane tab="Tab 3" key="3" disabled>Content of Tab Pane 3</TabPane>
                    </Tabs>

                </Card>
                <Card title="tab带图标的页签" className="card-wrap">
                    <Tabs defaultActiveKey='3' onChange={this.handleChange}>
                        <TabPane tab={<span><Icon type="edit"/>tab 1</span>} key="1">Content of Tab Pane 1</TabPane>
                        <TabPane tab={<span><Icon type="plus"/>tab 1</span>} key="2">Content of Tab Pane 2</TabPane>
                        <TabPane tab={<span><Icon type="delete"/>tab 1</span>} key="3">Content of Tab Pane 3</TabPane>
                    </Tabs>

                </Card>
                <Card title="动态切换的页签" className="card-wrap">
                    <Tabs
                        onChange={this.onChange}
                        activeKey={this.state.activeKey}
                        type="editable-card"
                        onEdit={this.onEdit}
                    >
                        {
                            (this.state.panes || []).map((item) => {
                                return <TabPane
                                    tab={item.title}
                                    key={item.key}
                                />
                            })
                        }
                    </Tabs>

                </Card>
            </div>
        )
    }

}
